<template>
  <div class="register-container">
    <div class="login_page">
      <div class="loginbox">
        <h1 class="loginword">注册</h1>
        <div class="login_input">
          <input type="text" v-model="username" required class="input-field" placeholder="请输入用户名">
        </div>
        <div class="login_input">
          <input type="password" v-model="password" required class="input-field" placeholder="请输入密码">
        </div>
        <div class="login_button">
          <button type="submit" class="register-button" @click="register">注册</button>
        </div>
        <Popup :isVisible="showPopup" :message="popupMessage" @close="closePopup" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Popup from '@/components/Popup.vue';

export default {
  components: {
    Popup,
  },
  data() {
    return {
      username: '',
      password: '',
      showPopup: false,
      popupMessage: '',
    };
  },
  methods: {
    register() {
      axios.post('http://localhost:3000/api/register', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          if (response && response.data) {
            // 注册成功，显示弹窗
            this.showPopup = true;
            this.popupMessage = '注册成功！即将自动跳转登陆页面';
            setTimeout(() => {
              this.closePopup();
              // 你可以在这里进行页面跳转的操作
              this.$router.push('/login'); // 假设你的登录页面路径是 '/login'
            }, 1200);
          } else {
            console.error('Invalid response:', response);
          }
        })
        .catch(error => {
          console.error(error.response.data);
          this.showPopup = true;
          this.popupMessage = '注册失败！用户已存在';
          setTimeout(() => {
              this.closePopup();
            }, 1200);
        });
    },
    closePopup() {
      // 关闭弹窗
      this.showPopup = false;
    },
  },
};
</script>

<style scoped>
.register-container {
  width: 100%;
  height: 100%;
}

.login-container{
  width: 100%;
  height: 100%;
}
.login_page {
  width: 100%;
  height: 100%;
  background-image: url('https://pic4.zhimg.com/v2-dd29db5ca85807bc06592c9f0fb8c147_r.jpg?source=172ae18b');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loginbox {
  width: 25%;
  height: 50%;
  background-color: #00000060;
  border-radius: 20px;
  text-align: center;
}

.loginword {
  color: #ffffff90;
  margin-top: 8%;
}

.login_input {
  margin-top: 5%;
}

.login_input input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

.login_button {
  width: 95%;
  height: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 3%;
}

.login_button button {
  width: 30%;
  height: 15%;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #2f57a1);
}

.register_page {
  width: 100%;
  height: 100%;
  background-image: url('https://pic4.zhimg.com/v2-dd29db5ca85807bc06592c9f0fb8c147_r.jpg?source=172ae18b');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.registerbox {
  text-align: center;
}

.registerbox h1 {
  color: #fff;
}

.registerbox button {
  margin-top: 5%;
  width: 40%;
  height: 15%;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #2f57a1);
}
</style>